<template>
    <div>
        <div class="warp">
            <BreadCrumb></BreadCrumb>
        </div>
        <h1>带头像的所有学生信息查询</h1>
        <div class="tables">
            <el-table @row-click="goDetall" :data="tableData" style="width:100%;overflow:auto;height: 450px;">

                <el-table-column prop="stu_id" label="学号">
                </el-table-column>
                <el-table-column prop="stu_name" label="姓名">
                </el-table-column>
                <el-table-column prop="stu_sex" label="性别">
                </el-table-column>
                <el-table-column prop="stu_jg" label="籍贯">
                </el-table-column>
                <!-- 时间格式设置-->
                <el-table-column prop="stu_date" label="出生日期">
                    <template slot-scope="scope">
                        <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="stu_gbf" label="男或女朋友">
                </el-table-column>
                <el-table-column prop="stu_hobby" label="爱好">
                </el-table-column>
                <!-- 头像的设置 -->
                <el-table-column prop="stu_head_img" label="头像">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.stu_head_img"
                            :preview-src-list="srcList" @click="bigImage(scope.row.stu_head_img)">
                        </el-image>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination background layout="prev, pager, next" :total="total" :pageSize="pageSize"
                :current-page="currentPage" @current-change="currentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { req_all_stu_info } from "@/api/stuInfo"

export default {
    data() {
        return {
            tableData: [],
            srcList: [
                "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            ],
            // 总条数
            total: 0,
            // 每页的条数
            pageSize: 4,
            totalData: 0,//请求回来的全部数据
            currentPage: 1,//当前页码
        }
    },
    async mounted() {
        let result = await req_all_stu_info();
        console.log(result);
        this.tableData = result.data;
        // 请求回来的数组的长度为分页的总条数
        this.total = result.data.length;
        this.totalData = result.data;
        // 默认第一页
        this.tableData = this.totalData.slice(
      (this.currentPage - 1) * this.pageSize,
      this.currentPage * this.pageSize
    );
    },
    methods: {
        bigImage(value) {
            // 点击查看大图
            console.log(value);
            this.srcList[0] = value;
        },
        // row:行的信息；column:列的信息； event:事件对象
        goDetall(row, column, event) {
            console.log(row, column, event);

            // 当目标不是img时，才可以跳转
            if (event.target.tagName != "IMG") {
                // 跳转到详情页面
                this.$router.push({
                    name: 'stuDetall',
                    query: {
                        stuInfoDetall: JSON.stringify(row),
                    }
                })
            }
        },
        // 此种方式是前台分页
        currentChange(value) {
            this.tableData = this.totalData.slice(
                (value - 1) * this.pageSize,
                value * this.pageSize
            )
        }
    },
}
</script>

<style lang="scss" scoped>
h1 {
    font-size: 20px;
}

.warp {
    height: 30px;
}

.el-pagination {
    height: 60px;
}
</style>